<template>
    <div>
        <!-- 锚点导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card class="box-card">
            <!--警告区域-->
            <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" :closable="false" show-icon>
            </el-alert>
            <el-row class="card-row">
                <el-col>
                    <span>选择商品分类：</span>
                    <!-- 分类参数的级联选择框 -->
                    <el-cascader v-model="cateListValArr" :options="cateListOption" :props="cateListProps"
                        @change="cateListChange"></el-cascader>
                </el-col>
            </el-row>

            <!-- Tab页签区域 -->
            <el-tabs v-model="currentActiveName" @tab-click="handleTabClick">
                <!-- 添加动态参数的面板 -->
                <el-tab-pane label="动态参数" name="many">
                    <!-- 添加动态参数按钮 -->
                    <el-button type="primary" size="mini" :disabled="isDisabledTabBtn" @click="addParamBtn">
                        添加参数{{isDisabledTabBtn}}
                    </el-button>

                    <!-- 添加动态参数表格 -->
                    <el-table :data="manyTabData" border stripe>
                        <!-- 折叠页 -->
                        <el-table-column type="expand">
                            <!-- 通过作用域插槽 -->
                            <template slot-scope="scope">
                                <!-- 循环渲染tag -->
                                <el-tag closable v-for="(item, index) in scope.row.attr_vals" :key="index" @close="delTagItem(index,scope.row)">
                                    {{item}}
                                </el-tag>
                                <!-- 新增tag 的ipt -->
                                <el-input class="input-new-tag" v-if="scope.row.inputVisible"
                                    v-model="scope.row.inputValue" ref="saveTagInput" size="small"
                                    @keyup.enter.native="handleInputConfirm(scope.row)"
                                    @blur="handleInputConfirm(scope.row)">
                                </el-input>
                                <!-- 新增tag 的按钮 -->
                                <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
                                    New Tag
                                </el-button>

                            </template>
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column type="index"></el-table-column>
                        <el-table-column prop="roleName" label="参数名称">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" icon="el-icon-edit"
                                    @click="editTabBtn(scope.row.id)">编辑
                                </el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete"
                                    @click="delTabBtn(scope.row.id)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <!-- 添加静态属性的面板 -->
                <el-tab-pane label="静态属性" name="only">
                    <!-- 添加静态属性的按钮 -->
                    <el-button type="primary" size="mini" :disabled="isDisabledTabBtn" @click="addParamBtn">添加属性
                    </el-button>

                    <!-- 渲染静态属性表格 -->
                    <el-table :data="onlyTabData" border stripe>
                        <!-- 表格折叠 -->
                        <el-table-column type="expand">
                            <!-- 通过作用域插槽 循环渲染tag -->
                            <template slot-scope="scope">
                                <el-tag v-for="(item, index) in scope.row.attr_vals" :key="index" closable @close="delTagItem(index,scope.row)">
                                    {{item}}
                                </el-tag>
                                 <!-- 新增tag 的ipt -->
                                 <el-input class="input-new-tag" v-if="scope.row.inputVisible"
                                 v-model="scope.row.inputValue" ref="saveTagInput" size="small"
                                 @keyup.enter.native="handleInputConfirm(scope.row)"
                                 @blur="handleInputConfirm(scope.row)">
                             </el-input>
                             <!-- 新增tag 的按钮 -->
                             <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+
                                 New Tag
                             </el-button>
                            </template>
                        </el-table-column>
                        <!-- 索引列 -->
                        <el-table-column type="index"></el-table-column>
                        <!-- 表格数据 -->
                        <el-table-column prop="roleName" label="属性名称"></el-table-column>
                        <!-- 编辑操作 -->
                        <el-table-column label="操作">
                            <!-- 作用域插槽渲染表格 -->
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" icon="el-icon-edit"
                                    @click="editTabBtn(scope.row.id)">编辑
                                </el-button>
                                <el-button type="danger" size="mini" icon="el-icon-delete"
                                    @click="delTabBtn(scope.row.id)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-card>

        <!-- 添加参数的dialog -->
        <el-dialog :title="'添加'+getAddParamDialogTitle" :visible.sync="addParamDialogVisible" width="50%"
            @close="addParamDialogClosed">
            <!-- 添加表单区域 -->
            <el-form :model="addParamForm" :rules="addParamFormRules" ref="addParamFormRef" label-width="90px">
                <el-form-item :label="getAddParamDialogTitle+':'" prop="attr_name">
                    <el-input v-model="addParamForm.attr_name"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addParamDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addParams">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改参数的dialog -->
        <el-dialog :title="'修改'+getAddParamDialogTitle" :visible.sync="editParamDialogVisible" width="50%"
            @close="editParamDialogClosed">
            <!-- 添加表单区域 -->
            <el-form :model="editParamForm" :rules="editParamFormRules" ref="editParamFormRef" label-width="90px">
                <el-form-item :label="getAddParamDialogTitle+':'" prop="attr_name">
                    <el-input v-model="editParamForm.attr_name"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="editParamDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editParams">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        // 组件名称
        name: 'Params',
        // 组件参数 接收来自父组件的数据
        props: {},
        // 局部注册的组件
        components: {},
        // 组件状态值
        data() {
            return {
                // 级联选择框的数据--后台接口获取
                cateListOption: [{
                    value: 'zhinan',
                    label: '指南',
                    id: 1,
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        id: 11,
                        children: [{
                            value: 'yizhi',
                            label: '一致',
                            id: 111
                        }, {
                            value: 'fankui',
                            label: '反馈',
                            id: 112
                        }, {
                            value: 'xiaolv',
                            label: '效率',
                            id: 113
                        }, {
                            value: 'kekong',
                            label: '可控',
                            id: 114
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        id: 12,
                    }]
                }, {
                    value: 'zujian',
                    label: '组件',
                    id: 2,
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        id: 22
                    }, {
                        value: 'form',
                        label: 'Form',
                        id: 23
                    }, {
                        value: 'data',
                        label: 'Data',
                        id: 24
                    }]
                }, {
                    value: 'ziyuan',
                    label: '资源',
                    id: 3,
                    children: [{
                        value: 'axure',
                        id: 31,
                        label: 'Axure Components'
                    }, {
                        value: 'jiaohu',
                        id: 32,
                        label: '组件交互文档'
                    }]
                }],
                // 级联选择框的默认配置
                cateListProps: {
                    value: 'id',
                    label: 'label',
                    children: 'children'
                },
                //级联选择框选中的值
                cateListValArr: [],
                //根据name设置默认选中的tab页签 
                currentActiveName: "many",
                //根据级联3级id和页签 获取的对应列表数据
                getTabListArr: [],
                //静态属性的参数列表数据
                onlyTabData: [
                    {
                        "id": 36,  //角色id
                        "roleName": "主管only",
                        "roleDesc": "技术负责人",
                        "inputValue": '',
                        "inputVisible": false,
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "children": [
                            {
                                "id": 101,  //权限id
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,   //权限id
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,   //权限id
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 35,
                        "roleName": "测试角色only",
                        "roleDesc": "测试角色描述",
                        "inputValue": '',
                        "inputVisible": false,
                        // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 34,
                        "roleName": "部门负责人only",
                        // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "roleDesc": "部门管理",
                        "inputValue": '',
                        "inputVisible": false,
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                //动态属性参数的列表数据
                manyTabData: [
                    {
                        "id": 36,  //角色id
                        "roleName": "主管many",
                        "inputValue": '',
                        "inputVisible": false,
                        // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "roleDesc": "技术负责人",
                        "children": [
                            {
                                "id": 101,  //权限id
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,   //权限id
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,   //权限id
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 35,
                        "roleName": "测试角色many",
                        "roleDesc": "测试角色描述",
                        "inputValue": '',
                        "inputVisible": false,
                        // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },

                    {
                        "id": 34,
                        "roleName": "部门负责人many",
                        "roleDesc": "部门管理",
                        "inputValue": '',
                        "inputVisible": false,
                        // "attr_vals": "测试品牌1 测试品牌2 测试品牌3 测试品牌4",
                        "attr_vals": ["测试品牌1", "测试品牌2", "测试品牌3", "测试品牌4"],
                        "children": [
                            {
                                "id": 101,
                                "authName": "商品管理",
                                "path": null,
                                "children": [
                                    {
                                        "id": 104,
                                        "authName": "商品列表",
                                        "path": null,
                                        "children": [
                                            {
                                                "id": 105,
                                                "authName": "添加商品",
                                                "path": null,
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    }
                ],
                // 添加参数的dialog显示隐藏字段
                addParamDialogVisible: false,
                //添加参数表单的数据
                addParamForm: {
                    attr_name: ''
                },
                //添加参数表单的数据校验规则
                addParamFormRules: {
                    attr_name: [
                        { required: 'true', message: '请输入参数名称', trigger: 'blur' }
                    ]
                },
                // 修改参数的dialog显示隐藏字段
                editParamDialogVisible: false,
                //修改参数表单的数据
                editParamForm: {
                    attr_name: ''
                },
                // 修改参数表单的数据校验规则
                editParamFormRules: {
                    attr_name: [
                        { required: 'true', message: '请输入参数名称', trigger: 'blur' }
                    ]
                },
                //控制文本输入框与新增按钮的显示隐藏
                inputVisible: false,
                //新增文本框的默认值
                inputValue: ''
            }
        },
        // 计算属性
        computed: {
            //判断页签下按钮是否禁用 返回布尔
            isDisabledTabBtn() {
                console.log(this.cateListValArr.length);
                if (this.cateListValArr.length !== 3) {
                    // 级联没有选中3个 禁用
                    return true;
                }
                return false;
            },
            //获取当前选中的三级菜单的id 获取对应列表数据
            getThirdListId() {
                //判断是否选中了3级菜单
                if (this.cateListValArr.length === 3) {
                    return this.cateListValArr[this.cateListValAr.length - 1];
                }
                //不满足
                return null;
            },
            // 添加参数的公用dialog提示信息
            getAddParamDialogTitle() {
                if (this.currentActiveName === 'many') {
                    return '动态参数'
                }
                return '静态属性'
            }
        },
        // 侦听器
        watch: {},
        // 组件方法
        methods: {
            // 获取下拉分类列表
            async getCateList() {
                const { data: res } = await this.$http.get("categories")
                if (res.status !== 200) {
                    return this.$message("下拉分类列表获取失败！")
                }
                this.cateList = res.data;

            },
            //级联选择框值改变时
            cateListChange() {
                //打印当前选中的级联值
                console.log(this.cateListValArr);
                //获取参数列表
                // this.getParamData();
            },
            // tab页签被点击时获取被点击的页签的name
            handleTabClick() {
                //获取参数列表
                // this.getParamData();
                // 打印当前被选中的页签name
                console.log(this.currentActiveName);
            },
            //抽离获取参数列表数据的共用函数
            async getParamData() {
                //如果没有选中3级 置空绑定的数组
                if (this.cateListValArr.length !== 3) {
                    //清空数组
                    this.onlyTabData = [];
                    this.manyTabData = [];
                    this.cateListValArr = [];
                }

                //打印选中的value
                console.log(this.cateListValArr);
                //获取对应页签的列表数据
                // const { data: res } = await this.$http.get(`categories/${this.getThirdListId}/attributes`, params: {
                //     sel: this.currentActiveName
                // })
                if (res.meta.status !== 200) return this.$message.error("页签列表数据获取失败！")

                //获取数据之前 对数据 进行字符串转数组
                res.data.forEach(item => {
                    // [""]
                    item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
                    // 防止新增tag标签重复 设置自己的显示隐藏表示 和 val
                    item.inputVisible = false;
                    item.inputValue = ''
                });

                //数据获取成功 判断当前点击的tab页签 存储对应数据数组
                if (this.currentActiveName === 'many') {
                    this.manyTabData = res.data;
                } else {
                    //赋值静态获取的数据
                    this.onlyTabData = res.data;
                }
            },
            // 添加参数的dialog关闭事件
            addParamDialogClosed() {
                // 添加参数表达重置校验
                this.$refs.addParamFormRef.resetFields();
            },
            //页签下的参数添加事件
            addParamBtn() {
                this.addParamDialogVisible = true;
            },
            // 点击确定 添加参数
            addParams() {
                //验证表单
                // this.$refs.addParamFormRef.validate(async valid => {
                //     //验证不通过
                //     if (!valid) return;

                //     //验证通过 添加请求
                //     const { data: res } = this.$http.post(`categories/${this.getThirdListId}/attributes`, {
                //         attr_name: this.addParamForm.attr_name,
                //         attr_sel: this.currentActiveName
                //     })

                //     //验证状态
                //     if(res.meta.status!==200) return this.$message.error("参数添加失败！")

                //     //添加成功提示用户 并刷新列表
                //     this.$message.success("参数添加成功！")
                //     // this.handleTabClick();
                // });
                //添加成功提示用户 并刷新列表
                this.$message.success("参数添加成功！")
            },
            // 修改参数的dialog关闭事件
            addParamDialogClosed() {
                // 添加参数表达重置校验
                this.$refs.editParamFormRef.resetFields();
            },
            // 点击确定 修改参数dialog
            editParams() {
                //验证表单
                // this.$refs.addParamFormRef.validate(async valid => {
                //     //验证不通过
                //     if (!valid) return;

                //     //验证通过 添加请求
                //     const { data: res } = this.$http.put(`categories/${this.getThirdListId}/attributes/${this.id}`, {
                //         attr_name: this.addParamForm.attr_name,
                //         attr_sel: this.currentActiveName
                //     })

                //     //验证状态
                //     if(res.meta.status!==200) return this.$message.error("参数添加失败！")

                //     //添加成功提示用户 并刷新列表
                //     this.$message.success("参数添加成功！")
                //     this.editParamDialogVisible=false
                //     // this.handleTabClick();
                // });
                //添加成功提示用户 并刷新列表
                this.$message.success("参数修改成功！")
            },
            // 点击页签的编辑按钮 显示编辑的dialog
            editTabBtn(editId) {
                // 保存当前点击的id 获取 当前的信息
                // const { data: res } = await this.$http.get(`categories/${this.getThirdListId}/attributes/${editId}`, {
                //     params: { attr_sel: this.currentActiveName }
                // })

                // if (res.meta.status !== 200) return this.$message.error("当前数据参数获取失败！")
                // //  重置表单数据
                // this.editParamForm = res.data;
                // 显示编辑的dialog
                this.editParamDialogVisible = true;
            },
            // 页签下删除按钮 删除参数
            async delTabBtn(id) {
                // 二次弹框是否删除
                const delRes = await this.$confirm('此操作将永久删除该条参数配置, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err);

                // console.log(delRes);
                if (delRes !== "confirm") return this.$message.info("取消了删除！")

                // //确认删除
                // const { data: res } = await this.$http.delete(`categories/${this.getThirdListId}/attributes/${id}`);

                // if (res.meta.status !== 200) {
                //     return this.$message.error("删除参数失败！")
                // }

                //删除成功
                this.$message.success("删除参数成功！删除的id是===" + id)
                //重新获取列表
                // this.handleTabClick();

            },
            //修改的dialog关闭事件
            editParamDialogClosed() {
                //重置提交表单
                this.$refs.editParamFormRef.resetFields();
            },
            //失去焦点 点击enter 都会触发该事件
            handleInputConfirm(row) {
                let inputValue = row.inputValue.trim();
                //判断是否新增输入内容 把新的数据重新提交
                if (inputValue) {
                    console.log(inputValue);

                    //最新添加的数据 push到渲染的数组
                    row.attr_vals.push(inputValue)

                    //提示
                    this.$message.success("假数据添加成功！");

                    //需要 添加请求 进行后台添加 ---省略 --抽离供 删除tag时使用

                }
                //设置显示隐藏
                row.inputVisible = false;
                row.inputValue = '';

            },
            //删除页签 tag时
            delTagItem(index,row){
               //根据id删除某一项 改变原数组
               row.attr_vals.splice(index,1)

               this.$message.success("假数据删除成功！");
               //重新调用发起 添加tag的公用请求方法 没有鞋

            },
            //点击了新增tag的按钮
            showInput(row) {
                //设置显示隐藏
                row.inputVisible = true;
                //当页面dom被重新渲染完成后 获取焦点
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            }

        },
        // 以下是生命周期钩子   注：没用到的钩子请自行删除
        /**
        * 在实例初始化之后，组件属性计算之前，如data属性等
        */
        beforeCreate() {
        },
        /**
        * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
        */
        created() {
            // 获取下拉分类列表
            // this.getCateList()
        },
        /**
        * 在挂载开始之前被调用：相关的 render 函数首次被调用。
        */
        beforeMount() {
        },
        /**
        * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
        * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
        */
        mounted() {
        },
        /**
        * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
        * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
        */
        beforeUpdate() {
        },
        /**
        * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
        * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
        */
        updated() {
        },
        /**
        * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
        */
        activated() {
        },
        /**
        * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
        */
        deactivated() {
        },
        /**
        * 实例销毁之前调用。在这一步，实例仍然完全可用。
        */
        beforeDestroy() {
        },
        /**
        * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
        * 所有的事件监听器会被移除，所有的子实例也会被销毁。
        */
        destroyed() {
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="less" scoped>
    .card-row {
        margin: 10px 0;
    }

    .el-tab-pane>.el-button {
        margin-bottom: 10px;
    }

    .el-tag {
        margin: 0 5px;
    }

    .input-new-tag {
        width: 120px;
    }
</style>